<template>
  <form @submit="formSubmit" class='repair-form' report-submit>
    <div class="repairContainer">
            <div class='form-wrap'>
                <div class='info-title'>
                  <image src='/static/images/repair_icon_describe@3x.png'/>
                  <span>{{type==1?'中止原因':'挂起原因'}}</span>
                </div>
                <div class='info-wrap'>
                  <i-row>
                        <i-col span="24" i-class='desc-wrap'>
                          <textarea placeholder="不超过100个字" class='desc' v-model='comment'/>
                        </i-col>
                  </i-row>
                </div>
            </div>
            <i-row i-class='submit-line'>
                <button formType="submit" class='submit-btn red'>挂起</button>
            </i-row>
    </div>
    <i-toast id="toast" />
  </form>           
</template>

<script type="text/javascript">
import { mapState ,mapActions} from 'vuex';
import moment from 'moment';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
        order:null,
        orderId:null,
        type:0,
        urls:['/order/suspendFaultOrder','/order/abortInspectOrder','/order/suspendMaintenanceOrder','/order/suspendAffairOrder']
    }
  },
  onShow(){
    var params = this.$root.$mp.query,title='确认挂起';
    if(params.orderId) this.orderId = params.orderId;
    if(params.type) this.type = params.type;
    if(this.type==1){
      title='确认中止';
    }
    wx.setNavigationBarTitle({
      title
    })
  },
  computed:{
    ...mapState(['userInfo'])
  },
  methods:{
      ...mapActions([
          'getOrderDetail'
      ]),
      formSubmit(){
         var data = {
              ukey:this.userInfo.ukey,
              comment:this.comment
        };
        if(this.type==1||this.type==2){
          var promise = this.getOrderDetail(this.orderId).then(res=>{
            data.order = JSON.stringify(res);
            this.pause(data)
          })
          
        }else{
          data.orderId = this.orderId;
          this.pause(data)
        }
      },
      pause(data){
        this.$http.post({
           url:this.urls[this.type],
           data
         }).then(res=>{
           if(res.s==0){
             var text = '中止成功';
             if(this.type==1){
                 text = '挂起成功';
             }
             $Toast({
                content:text
             });
             wx.navigateBack({delta:3})
           }
         }).catch(err=>{
           console.error('请求失败',err)
         })
      }
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.repair-form{                 
  height: 100%
}
.repairContainer{
    height:100%;
    display: flex;
    flex-direction: column;
    .form-wrap{
      flex:1;
      height:50rpx;
      .info-title{
          height: 90rpx;
          line-height: 90rpx;
          font-size:32rpx;
          color:#83878a;
          image{
            width:30rpx;
            height: 30rpx;
            vertical-align: middle;
            margin:-10rpx 20rpx 0 30rpx 
          }
        }
      .info-wrap{
        display: flex;
        flex-direction: column;
        margin:0 20rpx;
        border:1px solid #ddd;
        border-radius:8rpx;
        background: #fff;
        .desc-wrap{
          display: flex;
        }
        .desc{
          flex:1;
          padding: 16rpx;
          height:140rpx;
        }
      }
    }
    .submit-line{
      margin:50rpx 0; 
      .submit-btn{
        width:70%;
        background: #1380d3;
        color:#fff!important;
        font-size:36rpx;
        border-radius:40rpx; 
        height: 80rpx;
        line-height: 80rpx;
        &.red{
            background:#ff554d;
        }
      }
    }
    
}   
</style>
